<template>
	<movable-area class="areaMove">
		<movable-view class="area-view" :x="move.x" :y="move.y" direction="all" @change="onchange">
			<view class="too-container">
				<view class="additional-am" :class="{'additional-am-show':flagActive}">
					<view v-for="(item, index) in tools" :key="index" class="tool-default additional-tool"
						:style="{top:(flagActive?60*(index+1):0)+'px'}" @click="handleToolClick(item)">
						{{ item }}
					</view>
				</view>
				<view class="tool-default" @touchstart="touchStart" @touchend="touchEnd"
					:class="{'tool-active': flagActive || flagHoveActive}" @click="toggleActive" @touchmove="touchMove">
					工具
				</view>
			</view>
		</movable-view>
	</movable-area>
</template>

<script>
	export default {
		data() {
			return {
				flagHoveActive: false,
				flagActive: false,
				timer: null,
				move: {
					x: 0, // 初始x坐标为0
					y: 0 // 初始y坐标为0
				},
				tools: ['顶部', '底部', '退登'] // 新增的数组用于展示顶端工具
			};
		},
		created() {
			const res = uni.getSystemInfoSync();
			this.move.x = res.windowWidth;
			this.move.y = this.$storage.get('tool-move-y') || res.windowHeight / 2;
		},
		methods: {
			onchange(e) {
				if (this.flagHoveActive) {
					this.move.x = e.target.x;
					this.move.y = e.target.y;
				}
			},
			toggleActive() {
				clearTimeout(this.timer); // 清除之前的定时器
				const res = uni.getSystemInfoSync();
				this.flagActive = !this.flagActive;
				if (res.windowWidth === this.move.x) {
					this.move.x -= 50
				}
				if (!this.flagActive) {
					this.move.x = res.windowWidth;
					this.flagHoveActive = false;
				}
			},
			touchStart() {
				clearTimeout(this.timer); // 清除之前的定时器
			},
			touchMove() {
				this.flagHoveActive = true;
			},
			touchEnd() {
				const res = uni.getSystemInfoSync();
				this.flagHoveActive = false; // 三秒后自动将 flagHoveActive 设置为 false
				this.$storage.set('tool-move-y', this.move.y);
				this.timer = setTimeout(() => {
					this.flagActive = false; // 三秒后自动将 flagActive 设置为 false
					this.move.x = res.windowWidth;
				}, 3000);
			},
			handleToolClick(item) {
				// 在这里添加你的点击事件处理逻辑
				this.$emit('tool', item)
			}
		}
	};
</script>

<style scoped>
	.areaMove {
		width: 100vw;
		height: 100vh;
		z-index: var(--date-z-index);
		position: fixed;
		pointer-events: none;
	}

	.area-view {
		pointer-events: all
	}

	.tool-default {
		background-color: #f1f1f1;
		color: white;
		border-radius: 50px;
		box-sizing: border-box;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		opacity: .5;
		line-height: 50px;
		white-space: nowrap;
		width: 50px;
		height: 50px;
		color: #00aa7f;
		text-align: center;
	}

	.tool-active {
		background-color: #555;
	}

	.additional-tool {
		background-color: #00aa7f;
		box-sizing: border-box;
		opacity: 1;
		position: absolute;
		left: -50rpx;
		top: 0;
		transition: top 0.5s ease;
		color: white;
	}

	.too-container {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 10rpx;
	}

	.additional-am {
		position: relative;
		opacity: 0;
		transition: all .5s ease;
		pointer-events: none;
	}

	.additional-am-show {
		opacity: 1;
		pointer-events: all;
	}
</style>